<template>
  <div>
    <div v-if="!edit">
      {{ options[value.cval] }}
    </div>
    <Cell v-if="edit" is-link :title="options[value.cval]" @click="showPopup = true"/>
    <ActionSheet v-if="edit" v-model="showPopup" :actions="field.selection" @select="onchange" cancel-text="取消"
                 close-on-click-action></ActionSheet>
  </div>
</template>

<script>
  import gql from 'graphql-tag'
  import {ActionSheet, Cell} from 'vant';

  export default {
    name: 'FieldSelection', components: {
      ActionSheet, Cell
    },
    props: {
      field: {
        type: Object,
        default() {
          return {}
        }
      },

      model: {type: String, default: ''},
      id: {type: Number, default: 0},
      edit: {type: Boolean, defautl: false},
      saveFast: {type: Boolean, default: true}
    }, inject: ['value'],
    data: function () {
      return {
        showPopup: false,
        checkValue: ''
      }
    },
    apollo: {
      dataRecordSel() {
        return {
          query: gql`query qdv($model:String,$id:Int!,$queryFields:[String]){
                   dataRecordSel:allRecord(model:$model,id:$id,fields:$queryFields){
            value
          }
         }`,
          variables() {
            return {
              model: this.model,
              id: this.id,
              queryFields: [this.field.name]
            }
          },
          skip() {
            return !(this.field && this.model && this.id && this.edit)
          }
        }
      }
    },
    watch: {
      dataRecordSel: function (to, from) {
        this.checkValue = this.dataRecordSel[0].value[this.field.name]
      }
    },
    computed: {
      actions() {
        let v = []
        for (let item of this.allRecord) {
          let d = {name: item.value.display_name, id: item.value.id}
          v.push(d)
        }
        return v
      },
      options: function () {
        // [["x","y"],[],[]] => {x:Y}
        let v = {}
        for (let i of this.field.selection) {
          v[i[0]] = i[1]
        }
        return v
      },
      writeDict() {
        let v = {}
        v[this.field.name] = this.checkValue
        return v
      }
    },
    mounted: function () {
    },
    methods: {
      onchange: function (val) {
        if (this.saveFast) {
          let self = this
          this.$apollo.mutate({
            mutation: gql`mutation($id:Int!,$model:String!,$value:JSON!){
  writeRecord(id:$id,model:$model,value:$value){
    ok
  }
}`,
            variables: {id: this.id, model: this.model, value: this.writeDict}
          }).then(function (response) {
            if (response && response.data.writeRecord.ok) {
              self.$apollo.queries.dataRecordSel.refetch()
              // self.app_root.toast(response.result.errMsg)
              // self.$router ? self.$router.back() : window.history.back()
            } else if (response && !response.data.writeRecord.ok) {
              // self.app_root.toast(response.result.errMsg)
            }
          })
            .catch(function (error) {
              console.log(error, __filename)
            })
        } else {
          this.value.newval = this.checkValue
          this.$emit('update:value', this.value)
        }
      }
    }

  }
</script>

<style scoped>

</style>
